<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<c:set var="path" value="../..${ctx}/define/menu" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagination 分页表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="${ctx}/demo/demo.css" rel="stylesheet" type="text/css" />
<script src="${ctx}/scripts/boot.js" type="text/javascript"></script>
<script src="${ctx}/data/data.js" type="text/javascript"></script>
<style type="text/css">
html,body {
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
</style>
</head>
<body>

	<div id="toolbar1" class="mini-toolbar" style="padding:2px;">
	    <table style="width:100%;">
	        <tr>
	        <td style="width:100%;">
	            <a class="mini-menubutton" iconCls="icon-add" plain="true" menu="#popupMenu">新增</a>
	            <a class="mini-button" iconCls="icon-edit" plain="true">修改</a>
	            <a class="mini-button" iconCls="icon-remove" plain="true">删除</a>
	            <span class="separator"></span>
	            <a class="mini-button" iconCls="icon-reload" plain="true">导出</a>
	            <a class="mini-button" iconCls="icon-download" plain="true">导入</a>
	        </td>
	        <td style="white-space:nowrap;"><label style="font-family:Verdana;">Filter by: </label>
	            <input class="mini-textbox" />
	            </td>
	        </tr>
	    </table>
	</div>

    <!--menu-->
    <ul id="popupMenu" class="mini-menu" style="display:none;">
	    <li iconCls="icon-add" >操作单元集</li>
	    <li iconCls="icon-add" onclick="alert('ok');" >查询操作单元</li>
	    <li iconCls="icon-add" >更新操作单元</li>
	    <li iconCls="icon-add" >自定义操作单元</li>
    </ul>

	<div class="mini-fit">
		<div id="grid1" class="mini-datagrid"
			style="width: 100%; height: 100%;" borderStyle="border:0;"
			url="${path}/getFields.html"
			allowCellSelect="true" allowCellEdit="true" allowSortColumn="false" showPager="false" showModified="true">
			<div property="columns">
				<div name="name" field="name" headerAlign="center" allowSort="true" width="100">
					操作单元名称 <input property="editor" class="mini-textbox" style="width: 100%;" minWidth="100" />
				</div>
				<div name=text field="text" headerAlign="center" allowSort="true" width="200">
					分类 <input property="editor" class="mini-textbox" style="width: 100%;" minWidth="200" />
				</div>
				<div name="type" field="type" headerAlign="center" allowSort="true" width="300">
					描述 <input property="editor" class="mini-textbox" style="width: 100%;" minWidth="300" />
				</div>
			</div>
		</div>
	</div>

<script type="text/javascript">
	mini.parse();
	var tree = mini.get("tree1");
	var grid = mini.get("grid1");
	
	// tree.loadData(AllDatabasenames);
	// tree.loadList(AllDatabasenames,"id","pid");
	
	// 记录当前编辑的数据库名
	var editDatabaseName;
	tree.on("nodeselect", function(e) {
		if (e.isLeaf) {
			grid.load({
				name : e.node.id
			});
		} else {
			grid.setData([]);
			grid.setTotalCount(0);
		}
		editDatabaseName = e.node.id;
	});
	//grid.load();

	function addRow() {
		var node = tree.getSelectedNode();
		if (node) {
			var newRow = {
			};
			newRow.dept_id = node.name;
			grid.addRow(newRow, grid.getData().length);
		}
	}
	function removeRow() {
		var rows = grid.getSelecteds();
		if (rows.length > 0) {
			grid.removeRows(rows, true);
		}
	}
	function saveData() {
		var data = grid.getChanges();
		var json = mini.encode(data);
		alert(json);
		grid.loading("保存中，请稍后......");
		$.ajax({
			url : "../data/AjaxService.aspx?method=SaveEmployees",
			data : {
				data : json
			},
			type : "post",
			success : function(text) {
				grid.reload();
			},
			error : function(jqXHR, textStatus, errorThrown) {
				alert(jqXHR.responseText);
			}
		});
	}
</script>

</body>
</html>